<!DOCTYPE html>
<html>

<head>
    <title>动态过渡</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>

<body>
    <div id="app">
        渐入：
        <input type="range" v-model="fadeInDuration" min="0" :max="maxFadeDuration">
        <span>{{ fadeInDuration }}</span>
        <br> 渐出：
        <input type="range" v-model="fadeOutDuration" min="0" :max="maxFadeDuration">
        <span>{{ fadeOutDuration }}</span>
        <transition v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave">
            <p v-if="show">Hello Vue.js.</p>
        </transition>
        <button @click="stop = true">停止</button>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            stop: false,
            show: true,
            fadeInDuration: 1000,
            fadeOutDuration: 1000,
            maxFadeDuration: 1500,
        },
        mounted: function() {
            this.show = false
        },
        methods: {
            beforeEnter: function(el) {
                el.style.opacity = 0
            },
            enter: function(el, done) {
                var vm = this
                Velocity(el, {
                    opacity: 1
                }, {
                    duration: this.fadeInDuration,
                    complete: function() {
                        done()
                        if (!vm.stop) vm.show = false
                    }
                })
            },
            leave: function(el, done) {
                var vm = this
                Velocity(el, {
                    opacity: 0
                }, {
                    duration: this.fadeOutDuration,
                    complete: function() {
                        done()
                        vm.show = true
                    }
                })
            }
        }
    })
    </script>
</body>

</html>
